<template>
    <!--<div class="echart" :id="chartId" :style="{ width: '100%', height: chartHeight + 'px' }"></div>-->
    <div >
        <div class="map-top" :id="chartId"
             :style="{ width: '100%', height: chartHeight + 'px' }">
        </div>
    </div>
</template>

<script>
    import china from '../../common/json/map.js';
    import china2 from '../../common/json/map2.js';
    import SHmap from '../../common/json/SHmap.js';
    import JSmap from '../../common/json/JSmap.js';
    import ZJmap from '../../common/json/ZJmap.js';
    import AHmap from '../../common/json/AHmap.js';
    import FJmap from '../../common/json/FJmap.js';
    import mapInfo from "../../common/json/mapInfo.js";
    export default {
        props: {
            chartId: { required: true, type: String },
            chartHeight: { required: true, type: Number },
            chartDataType: { required: false, type: Array, default: () => [] },
            chartData: { required: false, type: Array, default: () => [] },
            chartLegend: { required: false, type: Array, default: () => [] },
            pTop: { required: false, type: Number, default: null },
            pLeft: { required: false, type: Number, default: null },
            zoom: { required: false, type: Number, default: 1 },
            duration: { required: false, type: Number, default: 3000 },
            centerpoints: { required: false, type: Array, default: () => [] }, // 中心点（多个）
            points: { required: false, type: Array, default: () => [] }, // 普通点（多个）（1.含飞窗；2.不含飞窗）
            dbPoints: { required: false, type: Array, default: () => [] }, // 普通点（代表室）
            czdwPoints: { required: false, type: Array, default: () => [] }, // 普通点（承制单位）
            pointsIMG: { required: false, type: Array, default: () => [] }, // 自定义图片（多个）
            lines: { required: false, type: Array, default: () => [] }, // 线条（多个）
            mapDataName: { required: '中国', type: String },
        },
        data() {
            return {
                count: 0,
                timer: null,
                option: null,
                myChart: null,
                china,
                china2,
                SHmap,
                JSmap,
                AHmap,
                FJmap,
                ZJmap,
                xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
                yData: [23, 24, 18, 25, 27, 28, 25], //数据
                myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
            };
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer)
            }
        },
        watch: {
            mapDataName(data) {
                if (data) {
                    this.initEcharts();
                }
            }
        },
        mounted() {
            //this.initEcharts();
        },
        methods: {
            initEcharts() {
                var _this = this
                if (this.myChart) {
                    document
                        .getElementById(this.chartId)
                        .removeAttribute('_echarts_instance_')
                    if (this.timer) {
                        clearInterval(this.timer)
                    }
                };
                var mapName = mapInfo.mapDataList[0].data.find(x => x.name === this.mapDataName).valueName;

                this.option = {
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        // show: true,
                        right: '10%',
                        top: 5,
                        bottom: '10%',
                        left: '10%'
                    },
                    geo: [
                        //{
                        //    map: mapName,
                        //    zlevel: -1,
                        //    silent: true,
                        //    // zoom: 1.0,
                        //    // layoutCenter: ["50%", "50%"],
                        //    // layoutSize: "100%",
                        //    top: _this.pTop !== null ? _this.pTop + '%' : 'middle',
                        //    left: _this.pLeft !== null ? _this.pLeft + '%' : 'center',
                        //    zoom: _this.zoom !== 1 ? this.zoom : 1.1,
                        //    roam: false,
                        //    itemStyle: {
                        //        normal: {
                        //            borderColor: 'rgba(192,245,249,.8)',
                        //            borderWidth: 3,
                        //            shadowColor: '#6FFDFF',
                        //            shadowOffsetY: 0,
                        //            shadowBlur: 10
                        //            // areaColor: 'rgba(29,85,139,.6)',
                        //        }
                        //    },
                        //    label: {
                        //        normal: {
                        //            // 静态的时候展示样式
                        //            show: false, // 是否显示地图省份得名称
                        //            textStyle: {
                        //                color: '#fff',
                        //                fontSize: 12,
                        //                fontFamily: 'Arial'
                        //            }
                        //        },
                        //        emphasis: {
                        //            // 动态展示的样式
                        //            show: false,
                        //            color: '#fff'
                        //        }
                        //    },
                        //    tooltip: {
                        //        show: false
                        //    }
                        //},
                        { //第二层
                            show: true,
                            map: mapName,
                            // zoom: 1.0,
                            // layoutCenter: ["50%", "50%"],
                            // layoutSize: "100%",
                            top: _this.pTop !== null ? _this.pTop + '%' : 'middle',
                            left: _this.pLeft !== null ? _this.pLeft + '%' : 'center',
                            zoom: _this.zoom !== 1 ? this.zoom : 1.1,
                            label: {
                                normal: {// 正常状态标签样式
                                    show: false, // 是否显示地图省份得名称
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12,
                                        fontFamily: 'Arial'
                                    }
                                },
                                emphasis: { // 高亮状态标签样式
                                    color: '#fff'
                                }
                            },
                            blur: {
                                label: { show: true, color: '#000' }
                            },
                            roam: true, // 是否开启鼠标滚轮缩放
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false,
                                        color: '#fff'
                                    },

                                    color: '#fff',
                                    borderColor: '#001c49',
                                    borderWidth: 1.5,
                                    areaColor: '#001c49'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        color: '#fff'
                                    },
                                    borderWidth: 3,
                                    borderColor: 'rgba(255, 230, 175,0.8)',
                                    shadowColor: 'rgba(255, 230, 175,0.5)',
                                    shadowBlur: 30,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12,
                                        backgroundColor: 'transparent'
                                    },
                                    areaColor: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: '#1cfbfe'
                                            },
                                            {
                                                offset: 1,
                                                color: '#3348e7'
                                            }
                                        ],
                                        false
                                    )
                                }
                            },
                            tooltip: {
                                show: false
                            }
                        },
                        //{ //第三层
                        //    type: 'map',
                        //    map: mapName,
                        //    zlevel: -2,
                        //     //zoom: 2.88,
                        //     //layoutCenter: ["16.6%", "19.5%"],
                        //     //layoutSize: "100%",
                        //    top: _this.pTop !== null ? _this.pTop + 1 + '%' : 'middle',
                        //    left: _this.pLeft !== null ? _this.pLeft + '%' : 'center',
                        //    zoom: _this.zoom !== 1 ? this.zoom : 1.1,
                        //    roam: true,
                        //    silent: true,
                        //    itemStyle: {
                        //        normal: {
                        //            borderColor: '#001c49', //边框颜色   rgba(35, 161, 184,0.5)
                        //            shadowColor: '#001c49', //阴影颜色   rgba(35, 161, 184,0.8)
                        //            shadowOffsetY: 5,
                        //            shadowBlur: 15,
                        //            areaColor: '#001c49'  //地图区域颜色
                        //        }
                        //    },
                        //    tooltip: {
                        //        show: false
                        //    }
                        //},
                        //{
                        //    type: 'map',
                        //    map: mapName,
                        //    zlevel: -3,
                        //    // zoom: 1.0,
                        //    // layoutCenter: ["50%", "52.4%"],
                        //    // layoutSize: "100%",
                        //    top: _this.pTop !== null ? _this.pTop + 1.5 + '%' : 'middle',
                        //    left: _this.pLeft !== null ? _this.pLeft + '%' : 'center',
                        //    zoom: _this.zoom !== 1 ? this.zoom : 1.1,
                        //    roam: false,
                        //    silent: true,
                        //    itemStyle: {
                        //        normal: {
                        //            borderColor: 'rgba(7, 65, 117,0.5)',
                        //            shadowColor: 'rgba(7, 65, 117,0.8)',
                        //            shadowOffsetY: 15,
                        //            shadowBlur: 8,
                        //            areaColor: '#0A2763'
                        //        }
                        //    },
                        //    tooltip: {
                        //        show: false
                        //    }
                        //}
                    ],
                    series: [
                        {//第一层,绑定地图数值数据
                            type: 'map',
                            // layoutCenter: ["50%", "50%"],
                            // layoutSize: "100%",
                            top: _this.pTop !== null ? _this.pTop + '%' : 'middle',
                            left: _this.pLeft !== null ? _this.pLeft + '%' : 'center',
                            zoom: _this.zoom !== 1 ? this.zoom : 1.1,
                            label: {
                                show: false
                            },
                            id:'mySeries',
                            map: mapName,
                            roam: true, // 是否开启鼠标滚轮缩放
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: mapName === 'china2',
                                        color: '#fff'
                                    },
                                    color: '#fff',
                                    borderColor: '#32CBE0',
                                    borderWidth: 1,
                                    areaColor: {
                                        type: 'linear-gradient',
                                        x: 0,
                                        y: 1000,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0.5,
                                                color: '#0D59C1' // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: '#53C9C7' // 100% 处的颜色
                                            }
                                        ],
                                        global: true // 缺省为 false
                                    }
                                },
                                emphasis: { //鼠标移上去时
                                    label: {
                                        show: true,
                                        color: '#fff'
                                    },
                                    borderWidth: 2,
                                    borderColor: 'rgba(255, 230, 175,0.8)',
                                    shadowColor: 'rgba(255, 230, 175,0.5)',
                                    shadowBlur: 30,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12,
                                        backgroundColor: 'transparent'
                                    },
                                    areaColor: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: '#1cfbfe'
                                            },
                                            {
                                                offset: 1,
                                                color: '#3348e7'
                                            }
                                        ],
                                        false
                                    )
                                }
                            },
                            tooltip: {// 鼠标悬浮窗
                                show: false,

                            }
                        },
                        {
                            // 涟漪效果系列，初始为空
                            name: '选中点',
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            data: [],
                            symbolSize: 10,
                            showEffectOn: 'render', // 在渲染时就显示特效，也可以是'emphasis'（但这里我们不需要hover触发）
                            rippleEffect: {
                                brushType: 'stroke', // 波纹类型，描边效果
                                scale: 5, // 缩放比例
                                period: 4, // 动画周期
                            },
                            itemStyle: {
                                color: '#F4E925'
                            },
                            zlevel: 1
                        }
                    ]
                };
                // 普通点(代表室)
                if (this.dbPoints && this.dbPoints.length > 0) {
                    var label = mapInfo.mysTyleLabel
                    this.dbPoints.forEach(item => {
                        var hasLabel = 'label' in item && item.label === true
                        var hasTimer = 'hasTimer' in item && item.hasTimer === true
                        var obj = {
                            id: 'dbSeries',
                            seriesIndex: this.option.series.length,
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: `image://${item.dbImage}`, // 图片路径
                            symbolSize: item.symbolSize,     
                            showEffectOn: 'render',
                            size: 26,
                            zlevel: 10,
                            //selectedMode: 'single',   // 单选模式
                            rippleEffect: item.rippleEffect,
                            hoverAnimation: true,
                            itemStyle: {
                                //normal: {
                                //    color: '#1DE9B6',
                                //    shadowBlur: 10,
                                //    shadowColor: '#333'
                                //},
                                //emphasis: {
                                //    itemStyle: {
                                //        shadowBlur: 20,
                                //        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                //    }
                                //}
                            },
                            //symbolSize: item.symbolSize,
                            data: item.data,
                            tooltip: {
                                show: true,
                                formatter(params) {
                                    return params.data.name
                                },
                                backgroundColor: label.backgroundColor,
                                borderColor: label.borderColor,
                                borderWidth: label.borderWidth,
                                textStyle: {
                                    color: label.color,
                                    align: 'left',
                                    lineHeight: 20
                                }
                            }
                        }
                        if (hasTimer) {
                            obj = Object.assign({}, obj, {
                                hasTimer: true,
                                data: item.data.map(e => {
                                    e.hasTimer = true
                                    e.seriesIndex = obj.seriesIndex
                                    return e
                                })
                            })
                        };
                        this.option.series.push(obj)
                    })
                }
                // 普通点(承制单位)
                if (this.czdwPoints && this.czdwPoints.length > 0) {
                    this.czdwPoints.forEach(item => {
                        var hasLabel = 'label' in item && item.label === true
                        var hasTimer = 'hasTimer' in item && item.hasTimer === true
                        var label = mapInfo.mysTyleLabel
                        var obj = {
                            id: 'czdwSeries',
                            seriesIndex: this.option.series.length,
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            showEffectOn: 'render',
                            size: 26,
                            zlevel: 10,
                            rippleEffect: item.rippleEffect,
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    color: '#FFA800',
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                },
                                emphasis: {
                                    //label: {
                                    //    show: 'label' in item,
                                    //    color: '#fff',
                                    //    fontSize: 16
                                    //}
                                }
                            },
                            symbolSize: item.symbolSize,
                            data: item.data,
                            tooltip: {
                                show: true,
                                padding: label.padding,
                                formatter(params) {
                                    return params.data.label[0] + '<br/>' + params.data.label[1]
                                    // + '<br/>' + params.data.label[2]
                                },
                                backgroundColor: label.backgroundColor,
                                borderColor: label.borderColor,
                                borderWidth: label.borderWidth,
                                extraCssText: 'max-width: 400px;white-space: pre-wrap;',// 允许换行
                                textStyle: {
                                    color: label.color,
                                    align: 'left',
                                    lineHeight: 25
                                }
                            }
                        }
                        //if (hasTimer) {
                        //    obj = Object.assign({}, obj, {
                        //        hasTimer: true,
                        //        data: item.data.map(e => {
                        //            e.hasTimer = true
                        //            e.seriesIndex = obj.seriesIndex
                        //            return e
                        //        })
                        //    })
                        //};
                        this.option.series.push(obj)
                    })
                }
                //* 普通提示框
                if (this.points && this.points.length > 0) {
                    this.points.forEach(item => {
                        var hasLabel = 'label' in item && item.label === true
                        var hasTimer = 'hasTimer' in item && item.hasTimer === true
                        var obj = {
                            seriesIndex: this.option.series.length,
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            showEffectOn: 'render',
                            size:26,
                            zlevel: 10,
                            rippleEffect: item.rippleEffect,
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    color: '#1DE9B6',
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                },
                                emphasis: {
                                    //label: {
                                    //    show: 'label' in item,
                                    //    color: '#fff',
                                    //    fontSize:16
                                    //}
                                }
                            },
                            symbolSize: item.symbolSize,
                            data: item.data,
                            tooltip: {
                                show: false
                            }
                        }
                        if (hasTimer) {
                            obj = Object.assign({}, obj, {
                                hasTimer: true,
                                data: item.data.map(e => {
                                    e.hasTimer = true
                                    e.seriesIndex = obj.seriesIndex
                                    return e
                                })
                            })
                        };
                        var label = mapInfo.mysTyleLabel
                        var labelLineStyle = mapInfo.labelLineStyle
                        if (hasLabel) {
                            obj = Object.assign({}, obj, {
                                label: {
                                    normal: {
                                        show: true,//常驻
                                        padding: label.padding,
                                        position: label.position,
                                        color: label.color,
                                        backgroundColor: label.backgroundColor,
                                        borderColor: label.borderColor,
                                        borderWidth: label.borderWidth,
                                        borderRadius: label.borderRadius,
                                        formatter(params) {
                                            return params.data.label
                                        },
                                        textStyle: {
                                            align: 'left',
                                            lineHeight: 20
                                        }
                                    },
                                    emphasis: {
                                        label: {
                                            show: false,
                                            color: '#fff'
                                        }
                                    }
                                },
                                labelLine: {
                                    show: true,
                                    smooth: true,
                                    lineStyle: labelLineStyle
                                }
                            })
                        }
                        item.data.forEach(p => {

                        })
                        this.option.series.push(obj)
                    })
                }

                //* 图片（按大小分组>按有无飞窗分组）
                if (this.pointsIMG && this.pointsIMG.length > 0) {
                    console.log(this.pointsIMG)
                    this.pointsIMG.forEach((item, i) => {
                        var hasLabel = 'label' in item && item.label === true
                        var obj = {
                            seriesIndex: this.option.series.length,
                            type: 'custom',
                            coordinateSystem: 'geo',
                            renderItem: (params, api) => {
                                return {
                                    type: 'image',
                                    style: {
                                        image: `../../img/mapImage/${this.pointsIMG[i].data[params.dataIndex].imageurl
                                            }`,
                                        x:
                                            api.coord([
                                                this.pointsIMG[i].data[params.dataIndex].value[0],
                                                this.pointsIMG[i].data[params.dataIndex].value[1]
                                            ])[0] - 10, // 数据的设置
                                        y:
                                            api.coord([
                                                this.pointsIMG[i].data[params.dataIndex].value[0],
                                                this.pointsIMG[i].data[params.dataIndex].value[1]
                                            ])[1] - 10,
                                        width: this.pointsIMG[i].data[params.dataIndex].width
                                    }
                                }
                            },
                            zlevel: 10,
                            data: this.pointsIMG[i].data,
                            tooltip: {
                                show: false
                            }
                        }
                        if (hasLabel) {
                            obj = Object.assign({}, obj, {
                                tooltip: {
                                    show: true,
                                    formatter(params) {
                                        return params.data.label
                                    }
                                }
                            })
                        }
                        //this.option.series.push(obj)
                    })
                }

                //* 中心点
                if (this.centerpoints && this.centerpoints.length > 0) {
                    this.centerpoints.forEach(item => {
                        var hasLabel = 'label' in item && item.label === true
                        var obj = {
                            seriesIndex: this.option.series.length,
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            showEffectOn: 'render',
                            zlevel: 9,
                            rippleEffect: item.rippleEffect,
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    color: '#1DE9B6',
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            symbolSize: item.symbolSize,
                            data: item.data,
                            tooltip: {
                                show: false
                            }
                        }
                        if (hasLabel) {
                            obj = Object.assign({}, obj, {
                                tooltip: {
                                    show: true,
                                    formatter(params) {
                                        return params.data.label
                                    }
                                }
                            })
                        }
                        //this.option.series.push(obj)
                    })
                }

                //* 线条
                if (this.lines && this.lines.length > 0) {
                    this.option.series.push({
                        seriesIndex: this.option.series.length,
                        type: 'lines',
                        zlevel: 8,
                        effect: {
                            show: true,
                            period: 4, // 箭头指向速度，值越小速度越快
                            trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', // 箭头图标
                            symbolSize: 7 // 图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: '#1DE9B6',
                                width: 1, // 线条宽度
                                opacity: 0.1, // 尾迹线条透明度
                                curveness: 0.3 // 尾迹线条曲直度
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        data: this.lines
                    })
                };

                // 基于准备好的dom，初始化echarts实例
                this.mapDataName == '中国' ?
                    echarts.registerMap('china2', china2) :
                    this.mapDataName == '上海' ?
                        echarts.registerMap('SHmap', SHmap) :
                        this.mapDataName == '江苏' ?
                            echarts.registerMap('JSmap', JSmap) :
                            this.mapDataName == '浙江' ?
                                echarts.registerMap('ZJmap', ZJmap) :
                                this.mapDataName == '安徽' ?
                                    echarts.registerMap('AHmap', AHmap) :
                                    this.mapDataName == '福建' ?
                                        echarts.registerMap('FJmap', FJmap) : console.log();
                //echarts.registerMap('china', china);
                //echarts.registerMap('SHmap', SHmap);
                this.myChart = echarts.init(document.getElementById(this.chartId));
                console.log(this.option)
                this.myChart.setOption(this.option);
                var pixelCzdwList = [];
                this.option.series.forEach(x => {
                    if (x.id && x.id === 'czdwSeries') {
                        x.data.forEach(y => {
                            if (!!y.value[0] && !isNaN(y.value[0]) && !!y.value[1] && !isNaN(y.value[1])) {
                                if (!this.isPointInMap(y.value[0], y.value[1])) {
                                    pixelCzdwList.push(y)
                                }
                            } else {
                                pixelCzdwList.push(y)
                            }
                        })
                    }
                });
                this.$nextTick(() => {
                    this.$emit('selectPixel', pixelCzdwList);
                });
                //console.log(pixelCzdwList)

                //* 飞窗自动轮播
                //var hasTimerList = []
                //this.option.series.forEach((e, i) => {
                //    if (e.hasTimer === true) {
                //        hasTimerList.push(i)
                //    }
                //})
                //if (hasTimerList.length > 0) {
                //    this.setAnimate(hasTimerList)
                //}
                //监听点击地图
                this.myChart.on('click', params => {
                    //点击地图区域
                    if (params.seriesType === 'map') {
                        this.$emit('mapLabelClick', params)
                    } else if (params.componentType === 'series' && params.seriesType === 'scatter') {
                        this.$emit('mapDotClick', params);
                        console.log('点击了点', this.option.series)
                        // 获取被点击的点数据
                        const point = params.data;
                        // 更新effectScatter系列的data
                        this.myChart.setOption({
                            series: [
                                {}, // 第一个系列不更新
                                {
                                    data: [point]  // 第二个系列设置为当前点
                                },
                                {},
                                {},
                            ]
                        });
                        //修改点的颜色
                        //const clickedIndex = params.dataIndex; // 获取被点击点的索引
                        //let newData = [];
                        //this.option.series.forEach((x, i) => {
                        //    if (x.data && x.data.length > 0) {
                        //        if (x.data[0].type === params.data.type) {
                        //            newData = this.option.series[i].data;
                        //            newData[clickedIndex] = {
                        //                ...newData[clickedIndex],
                        //                itemStyle: {
                        //                    normal: {
                        //                        color: '#FFEB3B',
                        //                        shadowBlur: 12,
                        //                        shadowColor: '#333'
                        //                    },
                        //                } // 修改颜色
                        //            };

                        //            this.myChart.setOption({ //局部更新,保留占位
                        //                series: [
                        //                    {},
                        //                    {},
                        //                    {},
                        //                    { id: 'czdwSeries', data: newData },
                        //                ]
                        //            });
                        //        }
                        //    }
                        //});
                    }
                });
                //监听地图缩放
                this.myChart.on('georoam', this.throttle(this.handleGeoRoam, 10).bind(this.myChart));
                
                ////随着屏幕大小调节图表
                //window.addEventListener("resize", () => {
                //    myChart.resize();
                //});
            },
            // 获取当前地图视图信息（中心点+缩放级别）
            getMapViewInfo() {
                if (!this.myChart) return null
                return this.myChart.getViewPoint({ seriesId: 'mySeries' }) // 传入geo的id，指定获取该坐标系的视图
            },
            // 检查点是否在地图边界内
            isPointInMap(lng, lat) {
                if (!this.myChart) return false // 确保图表已初始化
                // 转换经纬度为像素坐标（geo 组件的坐标系 ID 默认为 'geo'）
                const pixel = this.myChart.convertToPixel({ seriesId: 'mySeries' }, [lng, lat]);
                // 若转换结果为 null 或含 NaN，则表示在边界外
                //return pixel && pixel.every(val => !isNaN(val) && val !== Infinity)
                if (!this.isValidPixel(pixel)) return false

                // 2. 获取当前画布尺寸（可视区域范围）
                const dom = this.myChart.getDom()
                const { width, height } = dom.getBoundingClientRect()

                // 3. 结合视图状态修正判断（允许微小误差，如超出边界10px内仍视为可见）
                const [x, y] = pixel
                const tolerance = 10 // 误差容忍值（px）
                const inView = x >= (width * 0.09) && x <= (width*0.7) + tolerance &&
                    y >= -tolerance && y <= height + tolerance

                // 4. 打印调试信息（可选）
                //console.log('像素坐标：', [x, y], '画布尺寸：', { width, height }, '是否在可见区域：', inView)
                return inView
            },
            // 辅助方法：校验像素坐标是否有效
            isValidPixel(pixel) {
                if (!pixel || pixel.length !== 2) return false
                const [x, y] = pixel
                return !isNaN(x) && !isNaN(y) && x !== Infinity && y !== -Infinity
            },
            //节流->地图缩放
            throttle(fn, delay) {
                let last = 0;
                return function (...args) {
                    const now = Date.now();
                    if (now - last >= delay) {
                        fn.apply(this, args);
                        last = now;
                    }
                };
            },
            // 定义同步处理函数
             handleGeoRoam(params) {
                 const opt = this.myChart.getOption();
        // 注意：series[0]是我们的地图系列，它已经通过用户交互更新了最新的zoom和center
        if (params.zoom !== null) {
            // 缩放操作
            const targetZoom = opt.series[0].zoom;
            const targetCenter = opt.series[0].center;
            // 更新所有geo组件
            if (opt.geo && opt.geo.length) {
                opt.geo.forEach(geo => {
                    geo.zoom = targetZoom;
                    geo.center = targetCenter;
                });
            }
        } else {
            // 拖拽操作
            const targetCenter = opt.series[0].center;
            if (opt.geo && opt.geo.length) {
                opt.geo.forEach(geo => {
                    geo.center = targetCenter;
                });
            }
        }
                 this.myChart.setOption(opt);
            },

            changeSize(height) {
                this.myChart = echarts.init(document.getElementById(this.chartId))
                this.myChart.resize('auto', height)
            },
            setAnimate(hasTimerList) {
                this.count = 0
                this.timer = null
                var duration = this.duration || 3000

                this.timer && clearInterval(this.timer)
                this.timer = setInterval(() => {
                    hasTimerList.forEach(item => {
                        var dataLength = this.option.series[item].data.length
                        this.myChart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: item
                        })
                        this.myChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: item,
                            dataIndex: this.count % dataLength
                        })
                        this.myChart.dispatchAction({
                            type: 'showTip',
                            seriesIndex: item,
                            dataIndex: this.count % dataLength
                        })
                    })
                    this.count++
                }, duration)
                this.myChart.on('mouseover', params => {
                    if (params.seriesType === 'effectScatter') {
                        if ('hasTimer' in params.data && params.data.hasTimer === true) {
                            clearInterval(this.timer)
                            this.myChart.dispatchAction({
                                type: 'downplay',
                                seriesIndex: params.data.seriesIndex
                            })
                            this.myChart.dispatchAction({
                                type: 'highlight',
                                seriesIndex: params.data.seriesIndex,
                                dataIndex: params.dataIndex
                            })
                            this.myChart.dispatchAction({
                                type: 'showTip',
                                seriesIndex: params.data.seriesIndex,
                                dataIndex: params.dataIndex
                            })
                        }
                    }
                })
                this.myChart.on('mouseout', () => {
                    this.timer && clearInterval(this.timer)
                    this.timer = setInterval(() => {
                        hasTimerList.forEach(item => {
                            var dataLength = this.option.series[item].data.length
                            this.myChart.dispatchAction({
                                type: 'downplay',
                                seriesIndex: item
                            })
                            this.myChart.dispatchAction({
                                type: 'highlight',
                                seriesIndex: item,
                                dataIndex: this.count % dataLength
                            })
                            this.myChart.dispatchAction({
                                type: 'showTip',
                                seriesIndex: item,
                                dataIndex: this.count % dataLength
                            })
                        })
                        this.count++
                    }, duration)
                })
            },
        }
    };
</script>
<style scoped>
 
</style>